<!--suppress ALL -->
<template>
  <div class="info-container content">
    <el-card class="box-card">
      <div slot="header" class="clearfix title">
        <h4>{{categoryName}}</h4>
      </div>
      <list-item v-if="page.records && page.records.length > 0" :records="page.records"></list-item>
      <h2 v-if="!page.records || page.records.length == 0">敬请期待中...</h2>
      <el-pagination v-if="page.records && page.records.length >= 1"
        background
        layout="prev, pager, next"
        :total="page.total"
        :current-page="page.current"
        :page-size="page.size"
        @current-change="refreshPageRequest">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ListItem from '../../Component/ListItem/Index'
export default {
  components: {ListItem},
  name: 'DetailList',
  component: {
    ListItem
  },
  data () {
    return {
      categoryName: '',
      page: {
      },
      pageRequest: {
        current: 1,
        size: 5
      }
    }
  },
  watch: {
    '$route' (to, from) {
      // 监控路由变化，需要每次根据ID更新数据
      this.categoryName = this.getCategoryName(this.$route.params.id)
      this.getArticleData()
    }
  },
  computed: {
    ...mapState({
      category: state => state.index.category
    })
  },
  methods: {
    getArticleData: function () {
      let params = Object.assign({'categoryId': this.$route.params.id}, this.pageRequest)
      this.$api.index.getArticleList(params).then(response => {
        this.records = response.data.records
        this.page = Object.assign({}, response.data)
      })
    },
    getCategoryName: function (id) {
      let $category = this.getCategory(this.category, id)
      return $category ? $category.categoryName : ''
    },
    getCategory: function (category, id) {
      let result
      category.forEach((item) => {
        if (item.categoryId === parseInt(id)) {
          result = item
        }
        if (result) {
          return result
        }
        if (item.children) {
          result = this.getCategory(item.children, id)
        }
      })
      return result
    },
    refreshPageRequest: function (current) {
      this.pageRequest.current = current
      this.getArticleData()
    }
  },
  mounted () {
    this.categoryName = this.getCategoryName(this.$route.params.id)
    this.getArticleData()
  }
}
</script>

<style scoped>
  .info-container{
    background-color: #fafafa;
    min-height: calc(100vh - 249px);
  }
  .box-card{
    min-height: calc(100vh - 249px);
  }
  .content-list{
    min-height: 30vh;
  }
  .content-list li{
    text-align: left;
  }
</style>
